<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <navbar :title="title" @back="resetForm"/>
    <div class="table_box">
      <div class="table_header">
        <div class="search">
          <a-input-search
            placeholder="名称"
            style="width: 200px"
            v-model="searchData.name"
            @search="onSearch"
          />
        </div>
        <!-- <div class="btn">
          <a-button type="primary" @click="handleAdd"> 新增 </a-button>
        </div> -->
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :rowKey="(record) => record.id"
          :data-source="data"
          :pagination="pagination"
          :show-total="total => `Total ${total} items`"
          :loading="loading"
          @change="handleTableChange"
        >
          <div slot="operation" slot-scope="text, record">
            <a-button
              type="link"
              style="color: #1890ff"
              @click="goClusters(record)"
              ghost
            >
              查看单元簇
            </a-button>
            <!-- <a-button type="link" style="color: red" @click="delData(record.id)" ghost> 删除 </a-button> -->
          </div>
        </a-table>
      </div>
      <a-modal v-model="visible" title="单元簇信息" on-ok="handleOk" width="60%">
          <template slot="footer">
              <!-- <a-button key="submit" type="primary" @click="onSubmit">
                保存
              </a-button> -->
              <a-button key="back" @click="visible=false">
                  关闭
              </a-button>
          </template>
          <div class="form_box" v-if="form.id && visible">
              <clusters :e_s_unit_id="form.id"></clusters>
          </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {get,gets,updata,add} from "@/services"
import { getSearchCriteria } from "@/utils/util"
import clusters from "./components/clusters.vue"
var _this;
export default {
  name: "stationsInfo",
  components: {
      clusters
  },
  data() {
    return {
      columns: [
          {
            title:'ID',
            dataIndex:'id',
            key:'id'
          },
        {
          title: "单元名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "定位",
          key: "location",
          dataIndex: "location",
        },
        {
          title: "容量",
          key: "capacity",
          dataIndex: "capacity",
        },
        {
            title: "功率",
            key: "current_power",
            dataIndex: "current_power",
        },
        {
          title: "备注",
          key: "remarks",
          dataIndex: "remarks",
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {},
      pagination: {
        pageSize: 10,
      },
      searchData:{
        name:''
      },
      loading: false,
      data: [],
      visible:false,
      stations:{},
      title:'电站信息'
    };
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  created(){
    _this = this
    this.searchData.e_s_station_id = this.$route.query.id;
    get(this.$route.query.id,'esStations').then(({data})=>{
        if(data.code==20000){
            this.stations = data.data
            this.title = '电站信息（'+data.data.name+ '）'
        }
    })
    this.fetch({limit:10})
  },
  methods: {
      handleTableChange(pagination, filters) {
        console.log(pagination,filters);
        const pager = { ...this.pagination };
        pager.current = pagination.current;
        this.pagination = pager;
        this.fetch({
          page: pagination.current,
          limit: pagination.pageSize,
          ...filters,
        });
      },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
            let form = JSON.parse(JSON.stringify(_this.form))
            let fun =form.id?updata:add
            if(form.password){
                form.password_confirmation=form.password
            }
          fun(form,'users').then(({ data }) => {
            if (data.code == 20000) {
              _this.resetForm();
            } else {
              _this.$message.error(data.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goClusters(row){
        this.visible = true
        this.form = row
        gets(getSearchCriteria({e_s_unit_id:row.id}),'esClusters')
    },
    resetForm() {
      this.$router.push('/user?t=4')
    },
    fetch(params = {}) {
      this.loading = true;
      gets({
        ...params,
        searchJoin:'and',
        ...(getSearchCriteria(this.searchData))
      },'esUnits').then(({ data }) => {
        if (data.code == 20000) {
        let res = data.data;
        this.data = res.data;
        this.pagination.total = res.total
        this.pagination = {...this.pagination}
      }
        this.loading = false;
      });
    },
    onSearch() {
      this.fetch({page:1,limit:10})
    },
  },
};
</script>

<style scoped lang="less">
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  border-radius: 4px;
  .form_box {
    padding: 24px;
  }
  .table_box {
    padding: 16px 23px;
    .table_header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 24px;
    }
  }
  
}
</style>